<template>
  <div class="container">
    <div class="app-container">
      <div class="role-operate" style="padding: 10px">
        <el-button type="primary" size="mini" @click="showDialog = true">添加角色</el-button>
      </div>
      <el-table :data="list">
        <el-table-column width="200px" align="center" label="角色" prop="name">
          <template #default="{ row }">
            <el-input v-if="row.isEdit" v-model="row.editRow.name" size="mini" />
            <span v-else>{{ row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column width="200px" align="center" label="启用" prop="state">
          <template #default="{ row }">
            <el-switch
              v-if="row.isEdit"
              v-model="row.editRow.state"
              :active-value="1"
              :inactive-value="0"
            />
            <span v-else>
              {{ row.state === 1 ? "启用" : row.state === 0 ? "未启用" : "未定义" }}
            </span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="描述" prop="description">
          <template #default="{ row }">
            <el-input v-if="row.isEdit" v-model="row.editRow.description" size="mini" type="textarea" />
            <span v-else>{{ row.description }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template #default="{ row }">
            <div v-if="row.isEdit">
              <el-button type="primary" size="mini" @click="handleSubmit(row)">确定</el-button>
              <el-button
                size="mini"
                @click="cancel(row)"
              >取消</el-button>
            </div>
            <div v-else>
              <el-button type="text" size="mini">分配权限</el-button>
              <el-button
                type="text"
                size="mini"
                @click="row.isEdit = true"
              >修改</el-button>
              <el-popconfirm
                title="这是一段内容确定删除吗？"
                @onConfirm="delRole(row.id)"
              >
                <el-button slot="reference" type="text" size="mini" style="margin-left:10px">删除</el-button>
              </el-popconfirm>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-row style="width: 100%; margin: 20px 0" type="flex" justify="end">
        <el-col :span="12">
          <el-pagination
            :current-page="params.page"
            :page-sizes="[1, 2, 3, 4]"
            :page-size="params.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-col>
      </el-row>
      <el-dialog
        title="添加角色"
        :visible.sync="showDialog"
        width="500px"
        @close="close"
      >
        <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
          <el-form-item label="角色名称" prop="name">
            <el-input v-model="form.name" size="mini" />
          </el-form-item>
          <el-form-item label="启动" prop="state">
            <el-tooltip
              :content="'开关状态：' + (form.state === 1 ? '启用' : '未启用')"
              placement="top-start"
            >
              <el-switch
                v-model="form.state"
                :active-value="1"
                :inactive-value="0"
              /> </el-tooltip>
          </el-form-item>
          <el-form-item label="角色描述" prop="description">
            <el-input v-model="form.description" type="textarea" />
          </el-form-item>
          <el-form-item style="text-align: center">
            <el-button
              type="primary"
              size="mini"
              @click="addRole"
            >确定</el-button>
            <el-button size="mini" @click="close">取消</el-button>
          </el-form-item>

        </el-form>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { reqAddRole, reqDelRole, reqGetRoleList, reqUpdateRole } from '@/api/role'
export default {
  name: 'Role',
  data() {
    return {
      showDialog: false, // 控制弹出框的显示与隐藏
      list: [], // 角色列表
      total: 0,
      params: {
        page: 1,
        pagesize: 2
      },
      form: {
        name: '',
        state: 0,
        description: ''
      },
      rules: {
        name: [{ required: true, message: '角色名称是必填的', trigger: 'change' }],

        description: [{ required: true, message: '角色名称是必填的', trigger: 'change' }]
      }
    }
  },
  created() {
    this.getRoleList()
  },
  methods: {
    // 获取角色列表
    async getRoleList() {
      const {
        data: { rows, total }
      } = await reqGetRoleList(this.params)
      // console.log(data)
      this.list = rows
      this.total = total
      // vue2中单独给data中的数据做字段赋值， 需要使用this.$set的方式 (处理的对象,参数2是字段key,参数3是值)
      this.list.forEach((item) => {
        this.$set(item, 'isEdit', false)
        this.$set(item, 'editRow', {
          name: item.name,
          state: item.state,
          description: item.description
        })
      })
      console.log(this.list)
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.params.pagesize = val
      this.getRoleList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)

      this.params.page = val
      this.getRoleList()
    },
    // 确定修改
    async handleSubmit(row) {
      if (!row.editRow.name.trim()) return this.$message.warning('请输入角色名称')
      if (!row.editRow.description.trim()) return this.$message.warning('请输入角色描述')
      await reqUpdateRole({
        ...row.editRow, id: row.id
      })
      // this.getRoleList()
      Object.assign(row, {
        isEdit: false,
        ...row.editRow
      })
    },
    // 取消按钮
    cancel(row) {
      row.isEdit = false
      row.editRow = {
        name: row.name,
        state: row.state,
        description: row.description
      }
    },
    // 删除按钮
    async delRole(id) {
      await reqDelRole(id)
      if (this.list.length === 1 && this.params.page > 1) {
        this.params.page--
      }
      this.getRoleList()
    },
    // 关闭弹出框
    close() {
      this.showDialog = false
      this.$refs.formRef.resetFields()
    },
    // 添加角色
    addRole() {
      this.$refs.formRef.validate(async boo => {
        if (boo) {
          await reqAddRole(this.form)
          this.close()
          this.getRoleList()
        }
      })
    }
  }
}
</script>
